<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">收费员名称：</div>
      <el-input v-model="params.clerkName" placeholder="请输入内容" class="search-main" />
      <el-button type="primary" @click="getList">查询</el-button>
    </div>
    <el-button class="btn" type="primary" @click="flag = true">新增收费员</el-button>
    <!-- 表格区域 -->
    <div class="table">
      <el-table :data="list" style="width: 100%">
        <el-table-column type="index" label="序号" />

        <el-table-column label="收费员名称" prop="clerkName" />
        <el-table-column label="用户名" prop="username" />
        <el-table-column label="密码" prop="password" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="box">
        <el-pagination :current-page="params.page" :page-sizes="[5, 10, 15, 20, 25, 30, 35, 40]"
          :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>

      <el-dialog :title="form2.doctorID ? '编辑收费员' : '添加收费员'" :visible="flag" @close="handleClose">
        <div style="display: flex; justify-content: center;">
          <el-form ref="form" style="width: 400px;" :rules="rules" :model="form">
            <el-form-item label="收费员名称" prop="clerkName">
              <el-input v-model="form.clerkName" />
            </el-form-item>
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" />
            </el-form-item>
            <div class="box">
              <el-form-item>
                <el-button @click="flag = false">取消</el-button>
                <el-button type="primary" @click="confirm">确认</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import { getClerkListAPI, addClerkAPI, delClerkAPI, editClerkAPI } from '@/api/admin'
export default {
  data() {
    return {
      flag: false,
      total: 0,
      list: [],
      params: {
        page: 1,
        pageSize: 10,
        clerkName: '',
      },
      form: {
        clerkName: '',
        username: '',
        password: ''
      },
      form2: {
        clerkID: ''
      },
      rules: {
        clerkName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    //  页面一加载好就请求数据
    this.getList()

  },
  methods: {

    handleClose() {
      this.flag = false
      this.resetField()
    },
    resetField() {
      this.form = {
        clerkName: '',
        username: '',
        password: ''
      }
      setTimeout(() => {
        this.form2.clerkID = ''
      }, 500)
    },
    edit(row) {
      console.log("row")
      console.log(row.clerkName)
      this.flag = true

      this.form.clerkName = row.clerkName
      this.form.username = row.username
      this.form.password = row.password

      this.form2.clerkID = row.clerkID
      this.form.clerkID = row.clerkID
      // console.log(form);
      // console.log(form2);
    },
    del(row) {
      console.log("row");
      console.log(row.clerkID);
      this.$confirm('你确定要删除吗？').then(() => {
        delClerkAPI(row.clerkID).then(() => {
          this.$message.success('删除成功')
          this.getList()
          this.resetField()
        })
      }).catch(() => {
        //  取消删除
        this.getList()
        this.resetField()
      })
    },
    confirm() {
      this.$refs.form.validate((ok) => {
        if (ok) {
          if (this.form2.clerkID) {
            //  编辑
            // console.log('编辑')
            editClerkAPI(this.form).then(() => {
              this.$message.success('编辑成功')
              this.getList()
              this.flag = false
              this.resetField()
            })
          } else {
            //  新增
            addClerkAPI(this.form).then(() => {
              this.$message.success('添加成功')
              this.getList()
              this.flag = false
              this.resetField()
            })
          }
        }
      })
    },
    getList() {
      getClerkListAPI(this.params).then((res) => {
        console.log("res");
        console.log(res);
        //  存数据，展示在页面上
        this.total = res.data.total
        this.list = res.data.rows
        this.form = {
          clerkName: '',
          username: '',
          password: ''
        }

      })
    },

    handleSizeChange(pageSize) {
      // console.log('数据条数改变了', pageSize)
      this.params.pageSize = pageSize
      this.getList()
    },
    handleCurrentChange(page) {
      // console.log('页面变了', page)
      this.params.page = page
      // console.log(page)
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.building-container {
  background-color: #fff;
  padding: 20px;
}

.btn {
  margin: 10px;
}

.box {
  display: flex;
  justify-content: flex-end;
  margin: 20px 10px;
}

.department-container {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  ;
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
</style>
